<template>
	<div class="sendNotice" v-loading="loading" element-loading-text="文件上传中，请勿操作">
		<div class="classIndex_h">
			<router-link :to="{path: '/class/resource/index', query: {id: path}}">班级资源</router-link>
			<strong><i>></i>上传资源</strong>
		</div>
		<div class="sendNotice_form">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="上传资源" prop="select_or_not" class="resources_file">
					<uploader :options="uploadOptions" :autoStart="false" ref="uploader" :file-status-text="statusText" @files-submitted="fileSubmit" @file-removed="fileRemoved" @file-success="fileSuccess" @file-error="fileFail" :class="{ Upactive: isActive }" class="uploader-cp">
						<uploader-unsupport></uploader-unsupport>
						<uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow" :single="true">选择资源</uploader-btn>
						<uploader-list v-if="!selectFileShow"></uploader-list>
					</uploader>
				</el-form-item>
				<el-form-item label="资源名称" prop="name">
					<el-input v-model="ruleForm.name" maxlength="50" placeholder="50个字符内"></el-input>
				</el-form-item>
				<el-form-item label="科目" prop="subject_id" v-if="0">
					<el-select filterable v-model="ruleForm.subject_id" placeholder="请选择科目">
						<el-option v-for="(item, index) in orgSubject" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="资源简介" prop="profile" v-if="0">
					<el-input type="textarea" v-model="ruleForm.profile" :rows="6" resize="none" maxlength="200" placeholder="请输入资源简介描述"></el-input>
					<span class="sunWords"><i>{{ ruleForm.profile.length }}</i>/200</span>
				</el-form-item>
				<el-form-item label="权限" prop="authority">
					<el-radio-group v-model="ruleForm.authority">
						<el-radio :label="1">公开：同步到平台资源/视频</el-radio>
						<el-radio :label="0">不公开：仅限班级使用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item class="sendNotice_btn buttonCSS">
					<el-button type="primary" plain @click="resetForm('ruleForm')">取消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')" v-preventReClick>保存</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			path: this.$route.query.id,
			orgSubject: this.$g.subjectList,
			ruleForm: {
				path: '',
				filesize: 0,
				postfix: '',
				name: '',
				authority: 1,
				// subject_id: '',
				// profile: '',
				select_or_not: '',

			},
			rules: {
				select_or_not: [
					{ required: true, message: '请选择资源上传', trigger: 'blur' },
				],
				name: [
					{ required: true, message: '请输入资源名称', trigger: 'blur' },
					{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
				],
				authority: [
					{ required: true, message: '请选择', trigger: 'change' }
				],
			},


			statusText: {
				success: '上传成功',
				error: '上传出错',
				uploading: '正在上传...',
				paused: '暂停',
				waiting: '等待上传'
			},
			selectFileOrNot: false, //是否选中文件
			uploadInfo: {
				file_name: '',
				file_path: '',
				file_size: 0
			},
			attrs: {},
			uploadOptions: {
				target: this.BASE_URL + '/api/resource/res_upload',
				testChunks: false,
				headers: { Authorization: `Bearer ` + this.$g.access_token },
			},
			selectFileShow: true, //是否显示选择文件按钮
			uploadRetryTimes: 100, //文件最大重传次数
			isActive: false,
			uploadLimitMax: 2000,
			loading: false
		};
	},
	created() {

	},
	watch: {
		'changData'(val, newval) {
			this.path = sessionStorage.getItem('classId')
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	methods: {
		saveResource() {

			let success = (res => {
				this.loading = false
				if (this.roleBaseid(4)) {
					this.$message.success('上传成功，请等待教师审核');
				} else {
					this.$message.success(res.msg);
				}

				setTimeout(() => {
					this.$router.push({ path: '/class/resource/index', query: { id: this.path } })
				}, 1500);
			})
			let fail = (res => {
				this.loading = false
				this.$message.error(res.msg);
				this.$refs.uploader.uploader.cancel();
			})

			var params = {
				path: this.ruleForm.path,
				filesize: this.ruleForm.filesize,
				postfix: this.ruleForm.postfix,
				class_id: this.path,
				authority: this.ruleForm.authority,
				name: this.ruleForm.name,
				// subject_id:  this.ruleForm.subject_id,
				// profile: this.ruleForm.profile,
				filesize: this.uploadInfo.file_size,
				is_download: 1
			}
			this.$ajax.post('api/resource/vue_resource', params, { func: { success: success, fail: fail } })

		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loading = true
					this.isActive = true
					this.fileUpload();

				} else {
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$router.back(-1)
		},
		//上传成功的事件  
		fileSuccess(rootFile, file, message, chunk) {

			var mess = JSON.parse(message);
			mess = handleResponseData(mess)
			if (parseInt(mess.data.status) === 1) {

				this.ruleForm.path = mess.data.file_path;
				this.ruleForm.filesize = mess.data.file_size;
				this.ruleForm.postfix = mess.data.post_fix;
				this.saveResource();

				this.isActive = false
			} else if (mess.status === 'fail') {
				this.$message.error(mess.msg + ' ' + file.name)
				this.$refs.uploader.uploader.cancel()
			}
		},
		fileFail(rootFile, file, message, chunk) {

			var mess = eval('(' + message + ')');
			if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
				let callbcak = (data => {
					this.uploadRetryTimes--;
					this.$refs.uploader.uploader.retry(file);
				})
				this.get_access_token(callbcak);
			} else {
				this.$message.error(mess.msg);
			}
		},
		fileSubmit(files, fileList, event) {

			if (files[0].size === 0) {
				this.$refs.uploader.uploader.cancel();
				this.$message.error('上传文件大小不能小于0')
				this.selectFileShow = true;
			} else if (files[0].size > this.uploadLimitMax * 1024 * 1024 && this.uploadLimitMax > 0) {
				this.$message.warning('只允许上传' + this.uploadLimitMax + 'M以内的文件');
				this.$refs.uploader.uploader.cancel();
			} else {
				this.ruleForm.select_or_not = '1';
				this.uploadInfo.file_size = parseInt(files[0].size);
				this.selectFileOrNot = true;
				this.selectFileShow = false;
				this.ruleForm.name = files[0].name.replace(/\.\w+$/, '');
			}
		},
		fileRemoved(file) {
			this.ruleForm.select_or_not = '';
			this.selectFileOrNot = false;
			this.selectFileShow = true;
			this.isActive = false
			this.ruleForm.name = ''
		},
		fileUpload() {
			this.$refs.uploader.uploader.resume();

		},

	}
}
</script>